<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bpmn</title>
  <script src="./antvx6.js"></script>
</head>

<body>
  <div id="container"></div>
  <script>
    window.onload = function () {
      let nodeList = [
        {
          "id": "2",
          "shape": "activity",
          "width": 100,
          "height": 60,
          "position": {
            "x": 20,
            "y": 280
          },
          "label": "请假申请"
        },
        {
          "id": "6",
          "shape": "activity",
          "width": 100,
          "height": 60,
          "position": {
            "x": 300,
            "y": 240
          },
          "label": "领导审批"
        },
        {
          "id": "7",
          "shape": "activity",
          "width": 100,
          "height": 60,
          "position": {
            "x": 300,
            "y": 320
          },
          "label": "人事审批"
        },
        {
          "id": "13",
          "shape": "activity",
          "width": 100,
          "height": 60,
          "position": {
            "x": 560,
            "y": 280
          },
          "label": "总经理审批"
        },
      ];
      let linkList = [
        {
          "id": "8",
          "shape": "bpmn-edge",
          "source": "2",
          "target": "6"
        },
        {
          "id": "9",
          "shape": "bpmn-edge",
          "source": "2",
          "target": "7"
        },
        {
          "id": "11",
          "shape": "bpmn-edge",
          "source": "6",
          "target": "13"
        },
        {
          "id": "12",
          "shape": "bpmn-edge",
          "source": "7",
          "target": "13"
        },


        // {
        //   "id": "14",
        //   "shape": "bpmn-edge",
        //   "source": "2",
        //   "target": "13"
        // },
      ]
      const Graph = X6.Graph;
      Graph.onDragStart = function () { };

      Graph.registerNode(
        'activity',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              selector: 'body',
            },
            {
              tagName: 'image',
              selector: 'img',
            },
            {
              tagName: 'text',
              selector: 'label',
            },
          ],
          attrs: {
            body: {
              rx: 6,
              ry: 6,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
              strokeWidth: 1,
            },
            img: {
              x: 6,
              y: 6,
              width: 16,
              height: 16,
              'xlink:href':
                'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ',
            },
            label: {
              fontSize: 12,
              fill: '#262626',
            },
          },
        },
        true,
      )


      Graph.registerEdge(
        'bpmn-edge',
        {
          inherit: 'edge',
          attrs: {
            line: {
              stroke: '#A2B1C3',
              strokeWidth: 2,
            },
          },
        },
        true,
      )

      const graph = new Graph({
        container: document.getElementById('container'),
        autoResize: true,
        scroller: true,// zoomToFit需要用到
        width: window.innerWidth,
        height: window.innerHeight,
        interacting: function (cellView) {
          return false;// 禁止节点拖拽 https://blog.csdn.net/qq_43274430/article/details/125763687
        },
        connecting: {
          router: 'orth',// 连线的方式 ['normal','orth','oneSide','manhattan','metro','er']
        },
      })
      console.log(260, graph);

      let cells = [];
      nodeList.forEach(item => cells.push(graph.createNode(item)));
      linkList.forEach(item => cells.push(graph.createEdge(item)));
      graph.resetCells(cells);
      graph.zoomToFit({ padding: 30, maxScale: 1 });

      // graph.on('node:click', (e) => {});
    }
  </script>
</body>

</html>